<template>
    <div class="margin-box">
        <div class="card-box">
            <div class="card-title">资料信息</div>
            <div class="batchImport-main">
                <div class="batchImport-steps">
                    <el-steps :active="active" finish-status="success" align-center>
                        <el-step title="第一步"></el-step>
                        <el-step title="第二步"></el-step>
                        <el-step title="第三步"></el-step>
                    </el-steps>
                    <div v-if="active === 0">
                        <div class="step-first">
                            <div class="el-icon-upload one ones"></div>
                            <div class="step-first-text">
                                <h2>填写导入的信息</h2>
                                <p>请按照收据模板的格式准备导入数据，模板中的表头名称不可更改， 表头行不能删除，单次导入的数据不超过1000条。</p>
                                <el-button class="el-icon-download two" type="info" @click="downTemplate()">下载模板</el-button>
                            </div>
                        </div>
                        <div class="step-first step-first-last">
                            <div class="el-icon-upload one"></div>
                            <div class="step-first-text">
                                <h2>上传填好资产入库信息</h2>
                                <p>请按照收据模板的格式准备导入数据，模板中的表头名称不可更改， 表头行不能删除，单次导入的数据不超过1000条。</p>
                                <!--<el-upload
                                    class="upload-demo"
                                    ref="upload"
                                    :limit="1"
                                    action="/api/asset/fixed/warehousing/upload"
                                    :on-remove="handleRemove"
                                    :on-change="file => {handleChange(file)}"
                                    :auto-upload="false">
                                    <el-button class="el-icon-upload2 two" type="info">上传文件</el-button>
                                </el-upload>-->
                                <el-upload
                                    class="upload-demo"
                                    ref="upload"
                                    action="/admin/sys-file/upLodeFileAdd"
                                    :on-remove="handleRemove"
                                    :on-success="uploadSuccess"
                                    :on-exceed="handleExceed"
                                    :limit="1"
                                    :file-list="fileList"
                                    :headers="myHeader"
                                    :auto-upload="true">
                                    <el-button class="el-icon-upload2 two" type="info">上传文件</el-button>
<!--                                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
                                </el-upload>
                            </div>
                        </div>
                    </div>
                    <div v-if="active === 1">
                        <el-tabs v-model="activeName" @tab-click="handleTabClick">
                            <el-tab-pane name="first">
                                <span slot="label">
                                    <h3 style="font-weight: 500;">总共添加（{{successTotal}}）</h3>
                                </span>
                                <el-table
                                    :data="batchImportTableData.successList"
                                    align="center"
                                    ref="multipleTable">
                                    <el-table-column label="序号" prop="row"></el-table-column>
                                    <el-table-column label="资产编码" prop="assetCode"></el-table-column>
                                    <el-table-column label="资产名称" prop="assetName"></el-table-column>
                                    <el-table-column label="税费" prop="taxation"></el-table-column>
                                    <el-table-column label="登记费" prop="registrationFee"></el-table-column>
                                    <el-table-column label="折旧状态" prop="depreStatus"></el-table-column>
                                    <el-table-column label="价值" prop="value"></el-table-column>
                                    <el-table-column label="凭证号" prop="voucherNo"></el-table-column>
                                    <el-table-column label="凭证开始日期" prop="voucherDateStart"></el-table-column>
                                    <el-table-column label="凭证结束日期" prop="voucherDateEnd"></el-table-column>
                                </el-table>
                            </el-tab-pane>
                            <el-tab-pane name="second">
                                <span slot="label">
                                    <h3 style="font-weight: 500;">异常情况（{{errorTotal}}）</h3>
                                </span>
                                <div class="step-second">
                                    <h3>异常提示：<span v-if="batchImportTableData.errorList.length < 1">当前无异常数据！</span></h3>
                                    <p v-for="(item,index) in batchImportTableData.errorList" :key="index">{{item.errorMes}}</p>
                                    <el-button class="step-second-btn" @click="handleDownError">导出异常数据</el-button>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                    <div v-if="active === 2">
                        <div class="step-third">
                            <img :src="Smile">
                            <h2>批量导入完成</h2>
                            <p>成功导入{{successTotal}}条数据</p>
                        </div>
                    </div>
                </div>
                <div class="batchImport-btn">
                    <el-button style="margin-top: 12px;" v-if="active == 1" @click="handleClickPrev">上一步</el-button>
                    <el-button style="margin-top: 12px;" v-if="active == 0 || active == 1" @click="handleClicknext">下一步</el-button>
                    <el-button style="margin-top: 12px;" v-if="active == 2" @click="handleClickSubmit">完成</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script src="./batchImport.js">

</script>

<style scoped lang="scss">
@import "./batchImport";
</style>
